<template>
  <div class="page pettySavings-details">
    <div class="scroll-view">
      <customHeader middleTitle="活动详情" v-if="auth" rightTitle="编辑" @rightCallBack="linkToEdit"></customHeader>
      <customHeader middleTitle="活动详情" v-else></customHeader>
      <div class="page-body">
        <div class="top">
          <div class="shop-name">{{data.activityName}}</div>
          <div
            class="status"
            :class="statusFormate(data.activityStatus)['color']"
          >{{statusFormate(data.activityStatus)['text']}}</div>
          <ul class="top-ul">
            <li>
              <span>卡名称</span>
              <div>{{data.couponName}}</div>
            </li>
            <li>
              <span>LOGO</span>
              <div>
                <img :src="imgFormate(data.couponLogo)" alt />
              </div>
            </li>
            <li>
              <span>活动门店</span>
              <div>
                {{data.activityType===0?data.shopList[0].shopName:"全部门店"}}
              </div>
            </li>
            <li>
              <span>储值规则</span>
              <div>
                <ul class="content-ul">
                  <li
                    v-for="(item,index) in data.ruleList"
                    :key="index"
                  >充值{{item.rechargeAmt}}元，赠送{{item.additionalAmt}}元</li>
                </ul>
                <div style="white-space: nowrap;">订单金额高于 {{data.recommendLimit}} 元，给顾客推荐储值</div>
              </div>
            </li>
            <li v-show="false">
              <span style="width:auto;">使用余额时叠加津贴</span>
              <div>{{data.canOverlay==0?"已开启":"已关闭"}}</div>
            </li>
            <li>
              <span>备注</span>
              <div>{{data.couponDesc}}</div>
            </li>
          </ul>
        </div>
      </div>
      <div
        class="btn"
        v-if="auth"
        :class="{stop:data.activityStatus==12}"
        @click="setStatus"
      >{{data.activityStatus==12?"停用":"开启"}}活动</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast,MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
import jsAuthority from "../../tools/jsAuthority.js";
import config from "../../base/profile/config.json";
export default {
  name: "pettySavingsDetails",
  data() {
    return {
      auth: false,
      CommonUtil: CommonUtil,
      popupVisible: false,
      data: {},
      loadding: false,
    };
  },
  methods: {
    imgFormate(url) {
      return CommonUtil.imgUrlFormate(url, config.previewUrlPrefix);
    },
    //修改活动状态
    setStatus() {
      //活动状态 0=未知，10=未开始，12=进行中，21=已停用
      if (this.data.activityStatus == 12) {
        MessageBox({
          title: "提示",
          message: "确认要结束该活动？",
          showCancelButton: true,
          confirmButtonText: "确定"
        }).then(action => {
          if (action === "confirm") {
            this.reqSetStatus();
          }
        });
      } else {
        this.reqSetStatus();
      }

    },
    reqSetStatus() {
      this.loadding = true;
      let status = this.data.activityStatus == 12 ? 21 : 12;
      this.ajax({
        url: `/newapp/deposit/updateDepositCardActivityStatus.do?couponActivityId=${this.$route.query.couponActivityId}&activityStatus=${status}`,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success && res.resultObject) {
            this.$router.back();
          } else {
            this.loadding = false;
            Toast(res.msg);
          }
        })
        .catch(err => {
          this.loadding = false;
        });
    },
    linkToEdit() {
      this.$router.push({ path: "/pettySavings/details/edit", query: { couponActivityId: this.data.couponActivityId,type:"edit" } });
    },
    statusFormate(status) {
      //color(色值):orange  grey blue
      let v = { text: "", color: "" };
      if (status == 0) {
        v = { text: "未知", color: "grey" };
      } else if (status == 10) {
        v = { text: "未开始", color: "grey" };
      } else if (status == 12) {
        v = { text: "进行中", color: "blue" };
      }  else if (status == 21) {
        v = { text: "已停用", color: "orange" };
      }
      return v;
    },
    loadData() {
      this.ajax({
        url: `/newapp/deposit/queryDepositCardActivityDetail.do?couponActivityId=${this.$route.query.couponActivityId}`,
        type: "get",
        controlLoading: false,
      })
        .then(res => {
          if (res.success && res.resultObject) {
            this.data = res.resultObject;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
  },

  created() {
    // jsAuthority.checkedSuccess(() => {
    //   this.auth = jsAuthority.checked(
    //     "app.duizhangdan.jsztQuery"
    //   );
    // });
    CommonUtil.getUserInfo().then(data => {
      if (data.role == "1") {
        this.auth = true;
      }
    });
    this.loadData();
  },
  components: {
    customHeader,
  },
};
</script>
<style lang='scss' scoped>
@import "pettySavings";
</style>
